<template>
  <div class="bottomLeft">
    <div class="bg-color-black">
      <div class="numBox">
        <div class="box-item">
          <img :src="icon1" alt="" />
          <div>
            <div class="item-tips">岗位需求总量</div>
            <div class="item-num">{{postData.num2}} 个</div>
          </div>
        </div>
        <div class="box-item">
          <img :src="icon2" alt="" />
          <div>
            <div class="item-tips">岗位薪资范围</div>
            <div class="item-num">{{postData.num3}}</div>
          </div>
        </div>
        <div class="box-item">
          <img :src="icon3" alt="" />
          <div>
            <div class="item-tips">岗位需求城市</div>
            <div class="item-num">{{postData.num1}} 个</div>
          </div>
        </div>
      </div>
      <div>
        <div ref="chartRef" class="chartBox" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps, watch } from "vue";
import * as echarts from "echarts";
import sichuanJson from "@/utils/sichuan.json";
import { getPostData } from "@/api/dataView"

const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
const props = defineProps(['selectId']);
// 定义 ref
const chartRef = ref();
const myChart = ref(null);
const postData = ref({
  num1: null,
  num2: null,
  num3: null,
})
const icon1 = ref(require("@/assets/icon1.png"));
const icon2 = ref(require("@/assets/icon2.png"));
const icon3 = ref(require("@/assets/icon3.png"));
watch(()=>props.selectId, (newVal)=>{
  if(props.selectId || props.selectId == 0) {
    getPostDataAll(newVal)
  }
},{
  immediate: true,
  deep: true
})

// 配置项
let options = ref({
  backgroundColor: "#000", //画布背景颜色
  geo: {
    show: true,
    map: "china",
    label: {
      normal: {
        show: false,
      },
      emphasis: {
        show: false,
      },
    },
    regions: [],
    roam: false,
    itemStyle: {
      normal: {
        areaColor: "#01215c",
        borderWidth: 5, //设置外层边框
        borderColor: "#9ffcff",
        shadowColor: "rgba(0,54,255, 1)",
        shadowBlur: 150,
      },
    },
  },
  series: [
    {
      type: "map",
      map: "china",
      geoIndex: 1,
      aspectScale: 0.75, //长宽比
      showLegendSymbol: false, // 存在legend时显示
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
          textStyle: {
            color: "#fff",
          },
        },
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: "#01215c",
          borderColor: "#3074d0",
          borderWidth: 1,
        },
        emphasis: {
          areaColor: "#01215c",
        },
      },
    },
  ],
});
function inintData() {
  // 注册中国地图
  echarts.registerMap("china", sichuanJson);
  myChart.value = echarts.init(chartRef.value);
  // console.log("myChart.value", sichuanJson);
  unwarp(myChart.value).setOption(options.value);
}

// 获取岗位数据
async function getPostDataAll(id) {
  const res = await getPostData(id)
  postData.value = {
    num1: res.data['城市需求数'],
    num2: res.data['岗位需求总量'],
    num3: res.data['薪资范围']
  }
  // console.log('res',postData.value)
}

onMounted(() => {
  inintData();
  // getPostDataAll();
});
</script>

<style lang="scss" scoped>
$box-height: 520px;
$box-width: 100%;
.bottomLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 35px;
    border-radius: 10px;
  }
  .numBox {
    display: flex;
    justify-content: space-between;
    .box-item {
      width: 31%;
      display: flex;
      align-items: center;
      img {
        width: 60px;
        height: 60px;
      }
      .item-tips {
        font-size: 16px;
        color: #ffffff;
        margin-bottom: 10px;
      }
      .item-num {
        font-size: 26px;
      }
    }
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
.chartBox {
  // width: 100%;
  height: 460px;
}
</style>
